<template>
  <view>
    <!-- 轮播图区域 -->
    <swiper
      :indicator-dots="true"
      :autoplay="true"
      :interval="3000"
      :duration="1000"
      :circular="true"
    >
      <swiper-item v-for="(item, index) in info.goods_images" :key="index">
        <image :src="item.external_url" @click="preview(index)"></image>
      </swiper-item>
    </swiper>
    <!--  -->
    <!-- 商品信息区域 -->
<view class="goods-info-box">
  <!-- 商品价格 -->
  <view class="head">
  <view class="price">￥{{ info.goods_price_max }}</view>
  <view class="old">￥{{info.line_price_min}}</view>
  <view class="mai">已售{{info.goods_sales}}件</view>
  </view>
  
  <!-- 信息主体区域 -->
  <view class="goods-info-body">
    <!-- 商品名称 -->
    <view class="goods-name">{{ info.goods_name }}</view>
    
    
  </view>

</view>
<!--  -->
<!-- 商品详情信息 -->
<view>商品描述</view>
<rich-text :nodes="info.content"></rich-text>
<!--  -->
<!-- 商品导航工具栏组件 -->
<view class="goods_nav">
  
  <!-- fill 控制右侧按钮的样式 -->
  <!-- options 左侧按钮的配置项 -->
  <!-- buttonGroup 右侧按钮的配置项 -->
  <!-- click 左侧按钮的点击事件处理函数 -->
  <!-- buttonClick 右侧按钮的点击事件处理函数 -->
  <uni-goods-nav
   :fill="true"
   :options="leftOptions"
   :buttonGroup="rightOptions"
   @click="leftButtonClick"
   @buttonClick="rightButtonClick"
  />
  
</view>
  </view>
</template>

<script>
export default {
 data(){
  return{
    pid:'',
    info:'',
     // 左侧按钮组的配置对象
      leftOptions: [
        {
          icon: "shop",
          text: "首页",
        },
        {
          icon: "cart",
          text: "购物车",
          info: 2,
        },
      ],

      // 右侧按钮组的配置对象
      rightOptions: [
        {
          text: "加入购物车",
          backgroundColor: "#ff0000",
          color: "#fff",
        },
        {
          text: "立即购买",
          backgroundColor: "#ffa200",
          color: "#fff",
        },
      ]
  }
 },
 onLoad({goodsId}){
   console.log(goodsId)
   this.pid=goodsId
   this.getProDetail()
 },
 methods:{
  // 获取商品信息
 async getProDetail(){
   const {data:{detail}}=await this.$http.get('/goods/detail',
   {goodsId:this.pid}
   )
   console.log(detail)
   this.info=detail
  },
  // 实现轮播图的预览效果
preview(index) {
  uni.previewImage({
    // 默认显示图片的索引
    current: index,
    
    // 图片地址
    urls: this.info.goods_images.map(pic => pic.external_url),
  });
}
 }
}
</script>

<style lang="scss" scoped>
swiper {
  height: 550rpx;

  image {
    width: 100%;
    height: 100%;
  }
}
// 商品信息区域的样式
.goods-info-box {
  padding: 20rpx;
  padding-right: 0;

  .price {
    color: #c00000;
    font-size: 36rpx;
    margin: 20rpx 0;
  }

  .goods-info-body {
    display: flex;
    justify-content: space-between;

    .goods-name {
      font-size: 26rpx;
      padding-right: 20rpx;
    }
    // 收藏区域
    .favi {
      width: 240rpx;
      font-size: 24rpx;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      border-left: 1rpx solid #efefef;
      color: gray;
    }
  }

  // 运费
  .yf {
    margin: 20rpx 0;
    font-size: 24rpx;
    color: gray;
  }
}
.head{
  display: flex;
  // line-height: 50rpx;
  .old,
  .mai{
    margin-top: 30rpx;
    margin-right: 350rpx;
    font-size: 24rpx;
    color: rgb(169, 169, 169);
    text-decoration: line-through;
  }
  .mai{
    margin-right: 0;
  }
}
.goods-detail-container {
  // 给页面外层的容器底部添加 100rpx 的 padding
  // 防止页面内容被底部商品导航组件遮盖
  padding-bottom: 100rpx;
}

.goods_nav {
  // 将工具栏固定在页面底部
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
}
</style>